<template class="index_background">
  <div class="index_background">
    <el-collapse>
      <div class="divcss5">
      <h5 align="left">设置/修改绑定邮箱</h5>
      </div>
        <el-form :model="mailForm" status-icon :rules="verifycoderules" ref="mailForm" label-width="100px"
                 class="demo-ruleForm">
          <el-form-item label="新邮箱" prop="newmail" class="settinginput">
            <el-input type="mail" v-model="mailForm.newmail" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code" class="settinginput">
            <el-input type="verifycode" v-model="mailForm.verifycode" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="btn1" @click="resentCode('mailForm')">重新发送验证码</el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="btn2" @click="changeMail('mailForm')">确认修改</el-button>
          </el-form-item>
        </el-form>
    </el-collapse>
  </div>
</template>

<style>
.divcss5{
  margin:30px 0;
  color: rgb(144,144,144);
  }
.index_background{
   background:white;
   }
  .back2{
    background:tomato;
  }
  .lable{
    color: rgb(144,144,144);
    margin-top: 20px;
    margin-left: -400px;
    margin-bottom: 30px;
  }
  .center{
    margin-top: 100px;
    margin-left: 500px;
  }
  .demo-ruleForm {

    margin-bottom: 300px;
  }

  .set {
    width:500px;
    margin-top: 21px;
    font-size: 14px;
    color: #909399
  }

  .btn1 {
    background: rgb(24,144,255);
    width: 140px;
    color: white;
    position: relative;
    top: 10px;
    left: 0px;
  }

  .btn2 {
    background: rgb(24,144,255);
    width: 140px;
    color: white;
    position: relative;
    top: 10px;
    left: 0px;
  }

  .settinginput {
    width: 500px;
  }
</style>

<script>/* eslint-disable indent */

  import fetch from '../api/fetch'

  export default {
    data () {

      var checkCode = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入正确的验证码'))
        } else {
          callback()
        }
      }
      var resentCode = (rule,value, callback) => {


      }

      var confirmCode = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请再次输入正确的验证码'))
        } else {
          callback()
        }
      }

      return {
        mailForm: {
          oldmail:'',
          newmail:'',
          verifycode: '',
          checkcode: '' //checkcode为自动生成发送至邮箱的验证码
        },
        verifycoderules: {
          verifycode: [{validator: checkCode, trigger: 'blur'}],
          checkcode: [{validator: confirmCode, trigger: 'blur'}]
        }
      }
    },
    methods: {
      changeMail (formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            delete this.mailForm.oldmail  //oldmail为从数据库中获取的旧邮箱
            fetch.changeMail(this.mailForm).then(res => {
               if (res.data.success) {
                 this.$message({
                   message: '修改成功',
                   type: 'success'
                 })
               }
            }).catch(e => {
              console.log(e)
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }

  }
</script>
